import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx'
import { Popconfirm, Progress, notification, message, Modal, Drawer, Alert, Tabs, Table, Divider, Tag, Timeline, Tree, Statistic, Popove, List, Empty, Descriptions, Calendar, Card, Carousel, Collapse, Tooltip, Comment, Badge, Avatar, TimePicker, Transfer, TreeSelect, Select, Slider, Switch, Radio, Rate, Mentions, InputNumber, Input, Form, DatePicker, Cascader, Checkbox, AutoComplete, Button, Upload, Icon, Spin, Typography, Row, Col, Header, Footer, Sider, Content, Affix, Breadcrumb, Menu, Dropdown, Pagination, PageHeader, Steps } from 'antd'
import moment from 'moment';
import 'moment/locale/zh-cn';
import { getDivWidthAndHeight } from '../../utils/utils'
import s from '../../assets/less/WarnModal.less'
import ss from '../../assets/less/UtilStyle.less'
moment.locale('zh-cn');
const { SubMenu } = Menu;
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
const { Step } = Steps;
const { Title } = Typography;
const { Option } = Mentions;
const { Option1 } = Select;
const { Panel } = Collapse;
const { TabPane } = Tabs;
const { SHOW_PARENT } = TreeSelect;
@inject('YunYingStore')
@observer
export class WarnModal extends Component {
    state = { visible: false };

    showModal = () => {
        this.setState({
            visible: true,
        });
    };

    handleOk = e => {
        this.props.YunYingStore.changeWarnModaShow(false)
        this.props.YunYingStore.changeWarnShow(false)
    };

    handleCancel = e => {
        this.props.YunYingStore.changeWarnModaShow(false)
        this.props.YunYingStore.changeWarnShow(false)
    };
    render() {
        return (
            <div>
                {/* <Button type="primary" onClick={this.showModal}>
                    Open Modal
          </Button> */}
                <Modal
                    title="告警信息"
                    wrapClassName="btn_no_cancel"
                    visible={this.props.YunYingStore.YunYingModalShow}
                    // visible="true"
                    onOk={this.handleOk}
                    // width={getDivWidthAndHeight('for_modal')[1] * 2 / 2 * 3}
                    width="800px"
                    centered
                    onCancel={this.handleCancel}
                >
                    <div className={s.all}>
                        <div className={s.allWrap}>

                            {this.props.YunYingStore.WarnEd && (
                                <React.Fragment>
                                    <div className={s.leftPart}>
                                        <div className={s.oneMessage}>
                                            <div>告警时间: &nbsp;</div> <div>{this.props.YunYingStore.WarnMessage.ts}</div>
                                        </div>
                                        <div className={s.oneMessage}>
                                            <div>告警地点:&nbsp; </div> <div>{this.props.YunYingStore.WarnMessage.cameraAddress}</div>
                                        </div>
                                        <div className={s.oneMessage}>
                                            <div>布控库:&nbsp; </div><div>{this.props.YunYingStore.WarnMessage.collectionName}</div>
                                        </div>
                                        <div className={s.oneMessage}>
                                            <div>告警人员ID:&nbsp; </div><div>{this.props.YunYingStore.WarnMessage.id}</div>
                                        </div>
                                        <div className={s.oneMessage} id={s.last}>
                                            <div>相似度:&nbsp; </div> <div>{this.props.YunYingStore.WarnMessage.score}</div>
                                        </div>
                                    </div>
                                    <div className={s.rightPart}>
                                        <div className={s.imgMessage} id="for_modal">
                                            <div>特写图:</div><img src={'data:image/jpeg;base64,' + this.props.YunYingStore.WarnMessage.cropSrc} alt="" />
                                        </div>
                                        <div className={s.imgMessage} style={{ float: "none" }}>
                                            <div>抓拍图:</div><img src={'data:image/jpeg;base64,' + this.props.YunYingStore.WarnMessage.src} alt="" />
                                        </div>
                                    </div>
                                </React.Fragment>
                            )}

                        </div>
                    </div>

                </Modal>
            </div >
        );
    }
    componentDidMount = async () => {
    }
}

